<template>
  <view :style="themeColor()">
    <view class="bg-[var(--page-bg-color)] min-h-[100vh] relative" v-if="Object.keys(goodsDetail).length">
      <!-- 自定义头部 -->
      <view class="flex items-center fixed left-0 right-0 z-10 bg-transparent detail-head"
        :class="{ '!bg-[#fff]': detailHeadBgChange }" :style="navbarInnerStyle">
        <text class="nc-iconfont nc-icon-zuoV6xx" :style="navbarInnerArrowStyle" @click="backToPrevious()"></text>
        <view
          class="ml-auto !pt-[12rpx] !pb-[8rpx] p-[10rpx] bg-[rgba(255,255,255,.4)] rounded-full border-[2rpx] border-solid border-transparent box-border nc-iconfont nc-icon-fenxiangV6xx font-bold text-[#303133] text-[36rpx]"
          :class="{ 'border-[#d8d8d8]': detailHeadBgChange }" @click="openShareFn"></view>
      </view>

      <view class="w-full h-[100vw] relative overflow-hidden">
        <view class="absolute top-0 left-0 w-full h-full transition-transform duration-300 ease-linear transform"
          :class="{ 'translate-x-0': switchMedia === 'img', 'translate-x-full': switchMedia != 'img' }">
          <u-swiper :list="goodsDetail.goods.sliderPicUrls" :indicator="goodsDetail.goods.sliderPicUrls.length > 0"
            :indicatorStyle="{ 'bottom': '70rpx' }" :autoplay="switchMedia === 'img' ? true : false" height="100vw"
            radius="0" @click="swiperClick"></u-swiper>
        </view>
        <view
          class="media-mode absolute top-0 left-0 w-full h-full transition-transform duration-300 ease-linear transform"
          :class="{ 'translate-x-0': switchMedia === 'video', '-translate-x-full': switchMedia != 'video' }">
          <video id="goodsVideo" class="w-full h-full" :src="img(goodsDetail.goods.videoUrl)"
            :poster="img(goodsDetail.goods.videoImg)" objectFit="cover"></video>
        </view>
        <!-- 切换视频、图片 -->
        <view class="media-mode absolute bottom-[74rpx] w-full text-center leading-[50rpx] "
          v-if="goodsDetail.goods.videoUrl != ''">
          <text :class="{ '!bg-[var(--primary-color)]': switchMedia == 'video' }"
            @click="switchMedia = 'video'">视频</text>
          <text :class="{ '!bg-[var(--primary-color)]': switchMedia == 'img' }"
            @click="(switchMedia = 'img'), videoContext.pause()">图片</text>
        </view>
      </view>
      <view v-if="priceType != ''"
        class="rounded-t-[40rpx] -mt-[44rpx] relative flex items-center justify-between !bg-cover box-border pb-[26rpx] h-[136rpx] px-[30rpx]"
        :style="{ background: 'url(' + img('addon/shop/detail/discount_price_bg.png') + ') no-repeat' }">
        <view class="text-[#fff]">
          <view class="inline-block mr-[14rpx]">
            <text class="text-[32rpx] price-font mr-[4rpx]">￥</text>
            <text class="text-[48rpx] -mb-[4rpx] price-font">{{ parseFloat(goodsPrice).toFixed(2).split('.')[0]
            }}</text>
            <text class="text-[32rpx] price-font">.{{ parseFloat(goodsPrice).toFixed(2).split('.')[1] }}</text>
          </view>

        </view>
        <view v-if="priceType == 'combination_price'"
          class="flex flex-col text-[#fff] items-end h-[59rpx] justify-between">
          <text class="text-[26rpx] h-[28rpx] mr-[10rpx] font-500 leading-[36rpx]">{{ activityData.activity.userSize
          }}人团</text>
          <view class="flex items-center text-[24rpx] -mb-[10rpx] overflow-hidden h-[28rpx]">
            <text class="mr-[4rpx] whitespace-nowrap">已拼{{ activityData.headRecord.userCount }}件</text>
          </view>
        </view>
      </view>
      <view class="bg-[var(--page-bg-color)] rounded-[40rpx] overflow-hidden -mt-[34rpx] relative">
        <view class="datail-title relative px-[30rpx]"
          :class="{ 'pt-[40rpx]': priceType != '', 'pt-[30rpx]': priceType == '' }">
          <view class="text-[var(--price-text-color)] flex items-baseline mb-[12rpx]" v-if="priceType === ''">
            <view class="inline-block goods-price-time">
              <text class="price-font text-[32rpx]">￥</text>
              <text class="price-font text-[48rpx]">{{ parseFloat(goodsPrice).toFixed(2).split('.')[0] }}</text>
              <text class="price-font text-[32rpx] mr-[10rpx]">.{{ parseFloat(goodsPrice).toFixed(2).split('.')[1]
              }}</text>
            </view>

          </view>
          <view class="text-[#333] text-[32rpx] font-bold multi-hidden leading-[40rpx]">
            <view class="brand-tag middle" v-if="goodsDetail.goods.brandName">
              {{ goodsDetail.goods.brandName }}
            </view>
            {{ goodsDetail.goods.titleName || goodsDetail.goods.spuName }}
          </view>
          <view class="flex justify-between items-start mt-[24rpx]">
            <view class="text-[24rpx] leading-[34rpx] text-[var(--text-color-light6)]"
              v-if="goodsDetail.market_price && parseFloat(goodsDetail.market_price)">
              <text class="whitespace-nowrap mr-[4rpx]">划线价:</text>
              <text class="line-through">￥{{ diyGoods.fen2yuan(goodsDetail.market_price) }}</text>
            </view>
            <view class="text-[24rpx] leading-[34rpx] text-[var(--text-color-light6)]">
              <text class="whitespace-nowrap mr-[4rpx]">库存:</text>
              <text class="">{{ goodsDetail.stock }}</text>
              <text class="">{{ goodsDetail.goods.unit }}</text>
            </view>
            <view class="text-[24rpx] leading-[34rpx] text-[var(--text-color-light6)] flex items-baseline">
              <text class="whitespace-nowrap mr-[4rpx]">销量:</text>
              <text class="mx-[2rpx]">{{ goodsDetail.goods.salesCount }}</text>
              <text class="">{{ goodsDetail.goods.unit }}</text>
            </view>
          </view>
        </view>

        <view class="my-[var(--top-m)] sidebar-margin card-template px-[var(--pad-sidebar-m)]">
          <!-- 情况一：拼团成功 -->
          <block v-if="activityData.headRecord.status === 1">
            <view class="title">
              {{ activityData.orderId ? '恭喜您~拼团成功' : '抱歉~该团已满员' }}
            </view>
          </block>
          <!-- 情况二：拼团失败 -->
          <block v-if="activityData.headRecord.status === 2">
            <view class="title">
              {{ activityData.orderId ? '拼团超时,已自动退款' : '该团已解散' }}
            </view>
          </block>
          <!-- 情况三：拼团进行中 -->

          <block v-if="activityData.headRecord.status === 0">
            <view class="title" v-if="activityData.headRecord.expireTime <= new Date().getTime()"> 拼团已结束,请关注下次活动
            </view>
            <view class="title" v-else>
              还差<text class="mr-[4rpx] text-[red]  whitespace-nowrap">{{ activityData.headRecord.userSize -
                activityData.headRecord.userCount }}人</text>拼团成功

              <text class="mr-[4rpx] whitespace-nowrap">{{ endTime(activityData.headRecord.expireTime) }}</text>
            </view>
          </block>

          <view class="u-content">
            <view class="flex items-center w-full ">
              <view class="flex flex-col items-center mx-[10rpx] relative">
                <view class="desc flex items-center justify-center ">团长</view>
                <u-avatar :default-url="img('static/resource/images/default_headimg.png')" class="header-avatar"
                  :src="img(activityData.headRecord.avatar)" :size="'80rpx'" leftIcon="none" />
              </view>
              <view class="flex items-center  mx-[10rpx]" v-for="item in activityData.memberRecords" :key="item.id">
                <u-avatar :default-url="img('static/resource/images/default_headimg.png')" :src="img(item.avatar)"
                  :size="'80rpx'" leftIcon="none" />
              </view>
              <view class="flex items-center mx-[10rpx] "
                v-for="item in Number(activityData.headRecord.userSize - activityData.headRecord.userCount)"
                :key="item">
                <u-avatar :default-url="img('static/resource/images/default_headimg.png')" :size="'80rpx'"
                  leftIcon="none" />
              </view>
            </view>
          </view>
        </view>

        <view class="my-[var(--top-m)] sidebar-margin card-template px-[var(--pad-sidebar-m)]">
          <view class="title">商品详情</view>
          <view class="u-content">
            <u-parse :content="goodsDetail.goods.description"
              :tagStyle="{ img: 'vertical-align: top;', p: 'overflow: hidden;word-break:break-word;' }"></u-parse>
          </view>
        </view>


        <view class="tab-bar-placeholder"></view>
        <view
          class="border-[0] border-t-[2rpx] border-solid border-[#f5f5f5] w-[100%] flex justify-between pl-[32rpx] pr-[32rpx] bg-[#fff] box-border fixed left-0 bottom-0 tab-bar z-1 items-center">
          <!-- 情况一：拼团成功；情况二：拼团失败 -->
          <view class="flex flex-1" v-if="activityData.headRecord.status === 1 || activityData.headRecord.status === 2">
            <button v-if="activityData.orderId" @click="onLookGroupon(activityData.orderId)"
              class="w-[100%] primary-btn-bg  !h-[70rpx] font-500 text-[30rpx] !text-[#fff] !bg-[#ccc] !m-0 leading-[70rpx] rounded-full remove-border">查看订单</button>
            <button v-else @click="buyFn('buy_now')"
              class="w-[100%] primary-btn-bg  !h-[70rpx] font-500 text-[30rpx] !text-[#fff] !bg-[#ccc] !m-0 leading-[70rpx] rounded-full remove-border">我要开团</button>
          </view>
          <!-- 情况三：拼团进行中，查看订单或参加或邀请好友或参加 -->
          <view class="flex flex-1" v-if="activityData.headRecord.status === 0">
            <block v-if="activityData.headRecord.expireTime <= new Date().getTime()">
              <button v-if="activityData.orderId"
                class="flex-1 !h-[70rpx] font-500 text-[30rpx] !text-[#fff] !m-0 !mr-[16rpx] leading-[70rpx] rounded-full remove-border"
                style="background: linear-gradient(127deg, #FFB000 0%, #FFA029 100%);"
                @click="onLookGroupon(activityData.orderId)">
                查看订单</button>
              <button v-else :style="{ width: goodsDetail.goods.spuType ? '200rpx' : '400rpx' + '!important' }"
                class="flex-1 !h-[70rpx] font-500 text-[30rpx] !text-[#fff] primary-btn-bg !m-0 !mr-[16rpx] leading-[70rpx] rounded-full remove-border"
                @click="onLookGroupon(activityData.orderId)">去参团</button>
            </block>
            <block class="flex flex-1" v-else>
              <button v-if="activityData.orderId"
                class="flex-1 !h-[70rpx] font-500 text-[26rpx] !text-[#fff] !m-0  leading-[70rpx] rounded-full remove-border"
                style="background: linear-gradient(127deg, #FFB000 0%, #FFA029 100%);" @click="openShareFn()">
                邀请好友来拼团</button>
              <button v-else :style="{ width: goodsDetail.goods.spuType ? '200rpx' : '400rpx' + '!important' }"
                class="flex-1 !h-[70rpx] font-500 text-[26rpx] !text-[#fff] primary-btn-bg !m-0  leading-[70rpx] rounded-full remove-border"
                @click="onJoinGroupon()">立即参团</button>
            </block>
          </view>


        </view>
      </view>

      <ns-goods-sku v-if="loading" ref="goodsSkuRef" :goods-detail="goodsDetail" @change="specSelectFn"></ns-goods-sku>
      <share-poster ref="sharePosterRef" posterType="shop_goods" :posterParam="posterParam"
        :copyUrlParam="copyUrlParam" />
    </view>

    <!-- #ifdef MP-WEIXIN -->
    <!-- 小程序隐私协议 -->
    <wx-privacy-popup ref="wxPrivacyPopupRef"></wx-privacy-popup>
    <!-- #endif -->
  </view>
</template>

<script setup lang="ts">
import { ref, computed, getCurrentInstance, nextTick } from 'vue';
import { onLoad, onShow, onUnload, onPageScroll } from '@dcloudio/uni-app'
import { img, redirect, handleOnloadParams, getToken, deepClone, goback } from '@/utils/common';
import { getGoodsDetail, browse, collect, cancelCollect, getEvaluateList, getManjian, getActivityListBySpuId } from '@/addon/shop/api/goods';
import { getShopCouponList, getCoupon } from '@/addon/shop/api/coupon';
import nsGoodsSku from '@/addon/shop/components/ns-goods-sku/ns-goods-sku.vue';
import nsGoodsManjian from '@/addon/shop/components/ns-goods-manjian/ns-goods-manjian.vue';
import useCartStore from '@/addon/shop/stores/cart'
import { useLogin } from '@/hooks/useLogin'
import useMemberStore from '@/stores/member'
import { useShare } from '@/hooks/useShare'
import sharePoster from '@/components/share-poster/share-poster.vue'
import nsGoodsRecommend from '@/addon/shop/components/ns-goods-recommend/ns-goods-recommend.vue';
import { useGoods } from '@/addon/shop/hooks/useGoods'
import { getCombinationActivity, getCombinationRecordDetail, getHeadCombinationRecordList } from '@/addon/shop/api/combination'
import { useDurationTime } from '@/utils/formatting';
const diyGoods = useGoods();
// 使用 reactive 创建响应式对象
const timeData = ref({});
// 定义 onChange 方法
const onChange = (e) => {
  timeData.value = e;
};


// 分享
const { setShare } = useShare()

// 会员信息
const memberStore = useMemberStore()
const userInfo = computed(() => memberStore.info)

// 购物车数量
const cartStore = useCartStore();
const cartTotalNum = computed(() => cartStore.totalNum)

const goodsSkuRef: any = ref(null);
const goodsDetail: any = ref({});
const switchMedia: any = ref('img');
const manjianShowRef: any = ref(null); //满减送

const isAttrFormatShow = ref(false); //控制属性是否展开

const loading = ref<boolean>(false);
const servicesDataShow = ref<boolean>(false)
const distributionDataShow = ref<boolean>(false) //配送
const couponListShow = ref<boolean>(false) //优惠券
const discountTime = ref(0)

const sendMessageTitle = ref('')
const sendMessagePath = ref('')
const sendMessageImg = ref('')

const wxPrivacyPopupRef: any = ref(null)
const videoContext: any = ref(null)
let pageParameter = {};
onLoad((option: any) => {
  // #ifdef MP-WEIXIN
  // 处理小程序场景值参数
  option = handleOnloadParams(option);
  // #endif
  pageParameter = option;
})

onShow(() => {
  loading.value = false;
  // 删除配送方式
  uni.removeStorageSync('distributionType');
  cartStore.getList();
  // getManjianInfo();
  getDetailInfo();
  // getCombinationActivityList()
})
/**
 * 
 * @param 参团
 */
const onJoinGroupon = () => {
  goodsDetail.value.combination_activity.id = activityData.value.headRecord.activityId
  goodsDetail.value.combination_activity.combinationHeadId = activityData.value.headRecord.id
  activityData.value.userSize = activityData.value.headRecord.userSize
  if (goodsSkuRef.value) {
    goodsSkuRef.value.open('join')
  }
}
/** 查看拼团详情 */

const onLookGroupon = (id: any) => {
  redirect({ url: '/addon/shop/pages/order/detail', param: { order_id: id } })

}
// 结束时间或状态
function endTime(time: any) {
  const durationTime = useDurationTime(time);

  if (durationTime.ms <= 0) {
    return '该团已解散';
  }
  let timeText = '剩余 ';
  timeText += `${durationTime.h}时`;
  timeText += `${durationTime.m}分`;
  timeText += `${durationTime.s}秒`;
  return timeText;
}

const activityData = ref<any>()
const getDetailInfo = async () => {
  const { data: record } = await getCombinationRecordDetail({ id: pageParameter.activity_id });
  activityData.value = deepClone(record)
  // 获取活动信息
  const { data: activity } = await getCombinationActivity({
    id: record.headRecord.activityId,
  }
  );
  activityData.value.activity = deepClone(activity)
  console.log(activityData.value)
  // 加载商品信息
  const { data: spu } = await getGoodsDetail({ spuId: activityData.value.activity.spuId || '', });
  if (!spu || JSON.stringify(spu) === '{}') {
    let goBackParameter = {
      url: '/addon/shop/pages/index',
      title: '找不到该商品',
      mode: 'reLaunch'
    };
    goback(goBackParameter)
    return false
  }

  let data: any = deepClone(spu);
  /** 将数据接口拼成 所需要的接口 尽量减少前端代码的改动  */
  /** 判断商品的sku是否正在参加活动 如果没有参加 库存为0不能购买 */
  data.skus.forEach((sku: any) => {
    const product = activityData.value.activity.products.find((product: any) => product.skuId === sku.skuId);
    if (product) {
      sku.combination_price = product.combinationPrice;
      sku.stock = product.combinationStock || sku.stock
      sku.type = 'combination_activity' //自己加的 商品详情类型
    } else {
      // 找不到可能是没配置，则不能发起秒杀
      sku.stock = 0;
    }
  });
  goodsDetail.value.combination_activity = activityData.value.activity
  goodsDetail.value.type = 'combination_activity'
  goodsDetail.value.goods = data; //商品信息
  goodsDetail.value.goods_id = data.spuId,
    goodsDetail.value.evaluate_is_show = true //展示评价
  goodsDetail.value.skuList = data.skus.map((sku: any) => {
    return {
      cost_price: sku.costPrice, //成本价
      market_price: sku.marketPrice, //划线价
      price: sku.price, //零售价
      combination_price: sku.combination_price,//拼团价
      sku_id: sku.skuId,
      sku_image: sku.picUrl,
      stock: sku.stock,
      sku_spec_format: sku.properties.map((value: any) => {
        return value.valueName
      }).toString(),
    }
  })
  goodsDetail.value.goodsSpec = diyGoods.getPropertyList(data.skus).map((spec) => {
    return {
      spec_id: spec.id,
      spec_name: spec.name,
      spec_values: spec.values.map((specValue: any) => {
        return specValue.name
      }).toString()
    }
  })
  /** 原代码的接口逻辑中有默认选中的商品 故暂取第一个sku的数据为默认选中商品 */
  Object.assign(goodsDetail.value, goodsDetail.value.skuList[0])
  console.log(goodsDetail.value)
  goodsDetail.value.delivery_type_list = goodsDetail.value.goods.delivery_type_list ? Object.values(goodsDetail.value.goods.delivery_type_list) : [];


  loading.value = true;


  goodsDetail.value.goods.attr_format = []
  if (data.goods && data.goods.attr_format) {
    let attrFormatArr: any = deepClone(JSON.parse(data.goods.attr_format));
    attrFormatArr.forEach((item: any, index: any) => {
      if ((item.attr_child_value_name && !(item.attr_child_value_name instanceof Array)) || ((item.attr_child_value_name instanceof Array) && item.attr_child_value_name.length)) {
        goodsDetail.value.goods.attr_format.push(item);
      }
    })
  }
  if (goodsDetail.value.goods.videoUrl != '') videoContext.value = uni.createVideoContext('goodsVideo');
  sendMessageTitle.value = goodsDetail.value.goods.titleName
  // sendMessagePath.value = '/addon/shop/pages/goods/detail?sku_id=' + goodsDetail.value.sku_id;
  sendMessagePath.value = '/addon/shop/pages/goods/detail?goods_id=' + goodsDetail.value.goods_id;

  if (goodsDetail.value.type) {
    sendMessagePath.value += '&type=' + goodsDetail.value.type;
  }
  sendMessageImg.value = img(goodsDetail.value.goods.picUrl)

  // 分享 - start
  let share = {
    title: goodsDetail.value.goods.titleName,
    desc: goodsDetail.value.goods.subTitleName,
    url: goodsDetail.value.goods.picUrl
  }
  uni.setNavigationBarTitle({
    title: goodsDetail.value.goods.titleName || ''
  })
  setShare({
    wechat: {
      ...share
    },
    weapp: {
      ...share
    }
  });
  // 分享 - end

  // 折扣信息
  if (Object.keys(goodsDetail.value.goods).length && goodsDetail.value.type == 'discount' && goodsDetail.value.goods.is_discount && Object.keys(goodsDetail.value.discount_info).length) {
    let now = new Date();
    let timestamp: any = now.getTime();
    discountTime.value = goodsDetail.value.discount_info.active.end_time * 1000 - timestamp.toFixed(0)
  }
  // 商品限购
  goodsMaxBuy(goodsDetail.value);

  // 获取优惠券列表
  // getShopCouponListFn();

  // 获取评价
  getEvaluateListFn();

  if (getToken()) {
    // 我的足迹
    // myBrowseFn(goodsDetail.value.goods.goods_id);
  }

  copyUrlFn();

  nextTick(() => {
    setTimeout(() => {
      const query = uni.createSelectorQuery().in(instance);
      query.select('.swiper-box').boundingClientRect((data: any) => {
        swiperHeight = data ? data.height : 0;
      }).exec();
      query.select('.detail-head').boundingClientRect((data: any) => {
        if (data) {
          detailHead = data.height ? data.height : 0;
        }
      }).exec();
    }, 400)
    // #ifdef MP
    if (wxPrivacyPopupRef.value) wxPrivacyPopupRef.value.proactive();
    // #endif
  })



}




// 商品限购
const maxBuy = ref(-1);
const goodsMaxBuy = (data: any = {}) => {
  // 限购 - 是否开启限购
  if (data.goods.is_limit && userInfo.value && data.goods.stock > 0) {
    if (data.goods.max_buy) {
      let max_buy = 0;
      if (data.goods.limit_type == 1) { //单次限购
        max_buy = data.goods.max_buy;
      } else { // 单人限购
        let buyVal = data.goods.max_buy - (data.goods.has_buy || 0);
        max_buy = buyVal > 0 ? buyVal : 0;
      }

      if (max_buy > data.goods.stock) {
        maxBuy.value = data.goods.stock
      } else if (max_buy <= data.goods.stock) {
        maxBuy.value = max_buy;
      }
    }
  }
}


const specSelectFn = (id: any) => {
  goodsDetail.value.skuList.forEach((item: any, index: any) => {
    if (item.sku_id == id) {
      Object.assign(goodsDetail.value, item);
    }
  })
}


const buyFn = (type: any) => {
  if (goodsSkuRef.value) {
    goodsSkuRef.value.open(type)
  }
}





// 获取评价
const evaluate = ref({
  count: 0
})

const getEvaluateListFn = () => {
  getEvaluateList(goodsDetail.value.goods_id, 1, 3, 0).then((res: any) => {
    evaluate.value.list = res.data.list
    evaluate.value.count = res.data.total

  })
}


//预览图片
const imgListPreview = (item: any, index: any) => {
  if (Array.isArray(item)) {
    if (!item.length) return false
    var urlList = item;
    uni.previewImage({
      indicator: "number",
      current: index,
      loop: true,
      urls: urlList
    })
  } else {
    if (item === '') return false
    var urlList = []
    urlList.push(img(item))  //push中的参数为 :src="item.img_url" 中的图片地址
    uni.previewImage({
      indicator: "number",
      loop: true,
      urls: urlList
    })
  }

}

// 返回上一页
const backToPrevious = () => {
  if (getCurrentPages().length > 1) {
    uni.navigateBack({
      delta: 1
    });
  } else {
    redirect({
      url: '/addon/shop/pages/index',
      mode: 'reLaunch'
    });
  }
}




/************ 自定义头部-start ****************/
// 获取系统状态栏的高度
let systemInfo = uni.getDeviceInfo();
let platform = systemInfo.platform;
let menuButtonInfo: any = {};
// 如果是小程序，获取右上角胶囊的尺寸信息，避免导航栏右侧内容与胶囊重叠(支付宝小程序非本API，尚未兼容)
// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
menuButtonInfo = uni.getMenuButtonBoundingClientRect();
// #endif

// 导航栏内部盒子的样式
const navbarInnerStyle = computed(() => {
  let style = '';
  // 导航栏宽度，如果在小程序下，导航栏宽度为胶囊的左边到屏幕左边的距离
  // #ifdef MP
  let rightButtonWidth = menuButtonInfo.width ? menuButtonInfo.width * 2 + 'rpx' : '70rpx';
  style += 'height:' + menuButtonInfo.height + 'px;';
  style += 'padding-right:calc(' + rightButtonWidth + ' + 30rpx);';
  style += 'padding-left:calc(' + rightButtonWidth + ' + 30rpx);';
  style += 'padding-top:' + menuButtonInfo.top + 'px;';
  style += 'padding-bottom: 8px;';

  style += 'font-size: 32rpx;';
  if (platform === 'ios') {
    // 苹果(iOS)设备
    style += 'font-weight: 500;';
  } else if (platform === 'android') {
    // 安卓(Android)设备
    style += 'font-size: 36rpx;';
  }
  // #endif

  // #ifdef H5
  style += 'height: 100rpx;';
  style += 'padding-right: 30rpx;';
  style += 'padding-left: 30rpx;';

  style += 'font-size: 32rpx;';
  if (platform === 'ios') {
    // 苹果(iOS)设备
    style += 'font-weight: 500;';
  } else if (platform === 'android') {
    // 安卓(Android)设备
    style += 'font-size: 36rpx;';
  }
  // #endif
  return style;
})

// 导航栏内部盒子的样式
const navbarInnerArrowStyle = computed(() => {
  let style = '';
  // 导航栏宽度，如果在小程序下，导航栏宽度为胶囊的左边到屏幕左边的距离
  // #ifdef MP
  style += "padding-left: 10rpx;"
  style += "padding-right: 10rpx;"
  style += 'position: absolute;';
  style += 'left:calc( 100vw - ' + menuButtonInfo.right + 'px);';
  style += 'font-size: 26px;';
  if (platform === 'ios') {
    // 苹果(iOS)设备
    style += 'font-weight: 700;';
  } else if (platform === 'android') {
    // 安卓(Android)设备
  }
  // #endif
  // #ifdef H5
  style += 'font-size: 26px;';
  // #endif
  return style;
})

// 头部滚动
const instance = getCurrentInstance();
let swiperHeight = 0
let detailHead = 0

const detailHeadBgChange = ref(false)
onPageScroll((e) => {
  if (swiperHeight == 0 || detailHead == 0) return;
  let height = swiperHeight - detailHead - 20;
  detailHeadBgChange.value = false;
  if (e.scrollTop >= height) {
    detailHeadBgChange.value = true;
  }
})
/************ 自定义头部-end ****************/

const swiperClick = (index: any) => {
  if (typeof index == 'number') imgListPreview(goodsDetail.value.goods.sliderPicUrls, index)
}

/************* 分享海报-start **************/
const sharePosterRef: any = ref(null);
const copyUrlParam = ref('');
let posterParam: any = {};

// 分享海报链接
let wap_member_id = uni.getStorageSync('wap_member_id');

const copyUrlFn = () => {
  // copyUrlParam.value = '?sku_id=' + goodsDetail.value.sku_id;
  copyUrlParam.value = '?activity_id=' + activityData.value.headRecord.id;

  if (goodsDetail.value.type) {
    copyUrlParam.value += '&type=' + goodsDetail.value.type;
  }
  if (wap_member_id) copyUrlParam.value += '&mid=' + wap_member_id;
}

const openShareFn = () => {
  // posterParam.sku_id = goodsDetail.value.sku_id;
  if (wap_member_id) posterParam.member_id = wap_member_id;

  posterParam.activity_id = activityData.value.headRecord.id;

  sharePosterRef.value.openShare()
}
/************* 分享海报-end **************/

// 价格类型
const priceType = ref('') //''=>原价，新人价=>newcomer_price，discount_price=>折扣价，member_price=>会员价

// 商品价格
const goodsPrice = computed(() => {
  let price = 0;
  if (Object.keys(goodsDetail.value).length && Object.keys(goodsDetail.value.goods).length && goodsDetail.value.type == 'combination_activity' && goodsDetail.value.combination_price) {
    // 拼团价
    price = goodsDetail.value.combination_price ? goodsDetail.value.combination_price : goodsDetail.value.price;
    priceType.value = 'combination_price'
  } else {
    price = goodsDetail.value.price
    priceType.value = ''
  }
  return diyGoods.fen2yuan(price);
})

// 关闭预览图片
onUnload(() => {
  // #ifdef  H5 || APP
  uni.closePreviewImage()
  // #endif
})
</script>
<style lang="scss" scoped>
@import '@/addon/shop/styles/common.scss';

.desc {
  width: 72rpx;
  height: 36rpx;
  font-size: 24rpx;
  background: linear-gradient(132deg, #f3dfb1, #f3dfb1, #ecbe60);
  border-radius: 16rpx;
  position: absolute;
  left: 10rpx;
  top: -26rpx;
}

.header-avatar {
  border: 4rpx solid #edc36c;
}

:deep(.uni-video-bar) {
  bottom: 34rpx !important;
}

:deep(.uni-video-cover) {
  background: none;
}

:deep(.uni-video-cover-duration) {
  display: none;
}

:deep(.uni-video-cover-play-button) {
  border-radius: 50%;
  border: 4rpx solid #fff;
  width: 120rpx;
  height: 120rpx;
  background-size: 30%;
}

.remove-border {
  &::after {
    border: none;
  }
}

:deep(.u-cell-group__wrapper) {
  .u-cell__body {
    padding: 23rpx 32rpx;
  }
}

.tab-bar-placeholder {
  padding-bottom: calc(constant(safe-area-inset-bottom) + 100rpx);
  padding-bottom: calc(env(safe-area-inset-bottom) + 100rpx);
}

.tab-bar {
  padding-top: 16rpx;
  padding-bottom: calc(constant(safe-area-inset-bottom) + 16rpx);
  padding-bottom: calc(env(safe-area-inset-bottom) + 16rpx);
}

:deep(.u-count-down) .u-count-down__text {
  color: #fff;
  font-size: 28rpx;
}

:deep(.u-swiper-indicator__wrapper--line__bar) {
  height: 5rpx !important;
}

:deep(.u-swiper-indicator__wrapper--line) {
  height: 5rpx !important;
}

.datail-title {
  background: linear-gradient(#fff 70%, #F6F6F6);
}

.goods-sku .value-wid {
  width: calc(100% - 160rpx);
}

.media-mode {
  text {
    background: rgba(100, 100, 100, 0.4);
    color: #fff;
    font-size: 24rpx;
    line-height: 50rpx;
    border-radius: 20rpx;
    padding: 0 30rpx;
    display: inline-block;

    &:last-child {
      margin-left: 40rpx;
    }
  }
}

/*  #ifdef MP  */
.goods-price-time {
  animation: fadein .1s;
}

/* 进入动画 */
@keyframes fadein {
  0% {
    opacity: 0;
  }

  99% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/*  #endif  */
</style>
